* {
    margin: 0px;
    padding: 0px;
}

.container {
    padding: 20px 0px 20px 20px;
    box-sizing: border-box;
}

.container div {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    height: 50px;
    border: #999 solid 1px;
    background-color: #eee;
}

@media all and (min-width: 768px) {
    .col-md-1 {
        width: calc(8.333% - 22px);
    }
    .col-md-2 {
        width: calc(16.666% - 22px);
    }
    .col-md-3 {
        width: calc(25% - 22px);
    }
    .col-md-4 {
        width: calc(33.333% - 22px);
    }
    .col-md-6 {
        width: calc(50% - 22px);
    }
}

@media all and (max-width: 768px) {
    .col-sm-2 {
        width: calc(16.666% - 22px);
    }
    .col-sm-3 {
        width: calc(25% - 22px);
    }
    .col-sm-6 {
        width: calc(50% - 22px);
    }
    .col-sm-8 {
        width: calc(66.666% - 22px);
    }
    .col-sm-12 {
        width: calc(100% - 22px);
    }
}